<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
</head>

<body>
    <ul class="layui-nav">
        <li class="layui-nav-item">
            <a href="nav.html">带徽章<span class="layui-badge">9</span></a>
        </li>
        <li class="layui-nav-item">
            <a href="nav.html">小圆点<span class="layui-badge-dot"></span></a>
        </li>
        <li class="layui-nav-item  layui-hide">
            <a href="./05layui_login.html">你好,请登录</a>
        </li>

        <li class="layui-nav-item layui-hide" lay-unselect>
            <a href="javascript:;">
                <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" class="layui-nav-img">
            </a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;" id="nickname">xxx</a></dd>
                <dd><a href="javascript:;" id="identity">xxx</a></dd>
                <hr>
                <dd style="text-align: center;"><a href="nav.html">退出</a></dd>
            </dl>
        </li>
    </ul>
    <script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>

    <script>
        // 本地存储中查看有没有token和id 
        // 没有说明没有登录   
        // 显示 你好请登录 
        // 如果有 说明登录了
        // 显示头像人名 身份 
        //  只有id  如何获取 人名和身份等信息  
        //  请求接口localhost:8888/users/info/?id=...

        // 获取 localstorage 中token 和id的信息 
        const id = window.localStorage.getItem('id');
        const token = window.localStorage.getItem('token');
        const to_login = document.querySelector('li:nth-child(3)');
        const profile = document.querySelector('li:nth-child(4)');

        to_test()
        function to_test() {
            if (!id || !token) {
                // 让 个人信息 标签隐藏
                // 让 你好请登录 标签显示
                to_login.classList.remove('layui-hide');
                profile.classList.add('layui-hide');

                return
            }


            // 到这里说明登录了   
            // 我们能拿到  token  和  id   拿不到用户详细信息  
            // 可以根据id 获取  

            const xhr = new XMLHttpRequest();

            xhr.open('get', `http://localhost:8080/users/info?id=${id}`,true);

            xhr.onload = function () {
                const res = JSON.parse(xhr.responseText);   
                console.log(res);
                document.querySelector('#nickname').innerHTML = res.info.nickname;
                document.querySelector('#identity').innerHTML = res.info.identity;

            }
            xhr.setRequestHeader('authorization',token)
            xhr.send();

            // 获取用户的详细信息 需要携带参数id 
            // 还有设置请求头  authorization  就是登录后的token 
        
        to_login.classList.add('layui-hide');
        profile.classList.remove('layui-hide');

        }

    </script>
</body>

</html>